<template>
  <div class="form">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="数据类型">
        <el-select v-model="form.service.type" placeholder="请选择">
          <el-option v-for="item in types" :key="item.value" :label="item.text" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div v-if="form.service.type === 'static'">
        <el-form-item label="静态数据">
          <el-input v-model="form.service.data" type="textarea" :rows="6" placeholder="请输入">
          </el-input>
        </el-form-item>
      </div>
      <div v-if="form.service.type === 'ajax'">
        <el-form-item label="服务地址">
          <el-input v-model="form.service.url" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
          <el-select v-model="form.service.method" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-input v-model="form.service.url" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="请求处理">
          <el-input v-model="form.service.url" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="响应处理">
          <el-input v-model="form.service.url" placeholder="请输入内容"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import props from './props.js'

export default {
  props: {
    value: {
      type: Object,
      default() {
        return {
          ...props
        }
      }
    }
  },

  data() {
    return {
      types: [
        { value: 'staic', text: '静态数据' },
        { value: 'ajax', text: '服务请求' }
      ],
      // 配置数据
      form: { ...props }
    }
  },

  watch: {
    value: {
      handler() {
        this.handleSyncForm()
      },
      deep: true
    },
    form: {
      handler() {
        this.handleSyncValue()
      },
      deep: true
    }
  },

  mounted() {},

  methods: {
    // 同步表单
    handleSyncForm() {
      this.form.name = this.value.name
    },
    // 同步值
    handleSyncValue() {
      this.$emit('update', this.form)
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  /deep/.el-form-item .el-select,
  /deep/.el-form-item .el-cascader,
  /deep/.el-form-item .el-date-editor,
  /deep/.el-form-item .el-date-editor {
    width: 100%;
  }
}
</style>
